<template>
  <div class="container">
    <div class="income-box text-align-c" :style="'background-color:'+globalStyle.color2+';'">
      <div class="font-18 pad-t-20 line-h-1">累计总收入</div>
      <div class="font-30 font-w pad-t-10 line-h-1">￥{{memberStat.totalAmount}}</div>
    </div>
    <div class="pad-l-15 pad-r-15 mar-t--23">
      <div class="item-block pad-l-18 pad-r-18" @click="$pt.navigateTo({url: '/pages/order/wallet/details/main'})">
        <div>
          <img v-if="fileSpace" :src="fileSpace + '/images/mygroupbuy-icon-account-1.png'" class="img-icon width-60 height-60" alt="">
        </div>
        <div class="item-right flex flex-between mar-l-22">
          <div>
            <div class="font-19">收入明细</div>
            <div class="font-color-8 font-14">查看月收入和日收入</div>
          </div>
          <icon class="iconfont icon-arrow-right font-24 font-color-8"></icon>
        </div>
      </div>
      <div class="item-block pad-l-18 pad-r-18 mar-t-15" @click="$pt.navigateTo({url: '/pages/order/wallet/cash-manage/main'})">
        <div>
          <img v-if="fileSpace" :src="fileSpace + '/images/mygroupbuy-icon-account-2.png'" class="img-icon width-60 height-60" alt="">
        </div>
        <div class="item-right flex flex-between mar-l-22">
          <div>
            <div class="font-19">佣金提现</div>
            <div class="font-color-8 font-14">当前可提现佣金{{memberStat.availableAmount}}元</div>
          </div>
          <icon class="iconfont icon-arrow-right font-24 font-color-8"></icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    statMemberCommission
  } from '@/api/personal'

  export default {
    data() {
      return {
        memberStat: {
          totalIncome: 0,
          availableAmount: 0
        },
        globalStyle: {}
      }
    },
    onShow() {
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = getAppInfo.style
      this.statMemberCommission()
    },
    methods: {
      statMemberCommission() {
        statMemberCommission({
          memberId: this.getCustomerId
        }).then((response) => {
          if (response.isError) return
          this.memberStat = response.data
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.income-box{
  height: 145px;
}
.line-h-1{
  line-height: 1
}
.item-block{
  height: 100px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: white;
  box-shadow: 0 6px 6px #eee;
  .img-icon{
    border-radius: 50%;
  }
  .item-right{
    width: 75%;
  }
}
.top {
  margin-top: -60px;
}

.income {
  margin-top: -86px;
}

.income-item {
  margin-top: -125px;
}

.mid-border {
  height: 30px;
}
</style>
